<template>
    <a-form-model :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
        <a-form-model-item :wrapper-col="{ offset: 1, span: 23 }">
            <a-checkbox v-model="form.enabled" @change="handleInputChange">是否启用</a-checkbox>
        </a-form-model-item>
        <a-form-model-item label="IP地址">
            <a-input v-model="form.ip" style="width: 65%; margin-right: 8px;" @input="handleInputChange" />
            <span>端口号</span>
            <a-input v-model="form.port" style="width: 25%;" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label="MN号">
            <a-input v-model="form.mn" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label="PW">
            <a-input v-model="form.pw" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label="协议版本">
            <a-select v-model="form.protocolVersion" @change="handleInputChange">
                <a-select-option value="2005">2005</a-select-option>
                <a-select-option value="2017">2017</a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item label="心跳周期 (秒)">
            <a-input v-model="form.heartbeatInterval" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label="实时数据上报周期 (秒)">
            <a-input v-model="form.realtimeReportInterval" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label="超时时间 (秒)">
            <a-input v-model="form.timeout" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label="重传次数">
            <a-input v-model="form.retryCount" @input="handleInputChange" />
        </a-form-model-item>
        <a-form-model-item label=" " :colon="false">
            <a-checkbox v-model="form.minuteReportEnabled" @change="handleInputChange">分钟数据上报 (分)</a-checkbox>
            <a-input
                v-model="form.minuteReportInterval"
                :disabled="!form.minuteReportEnabled"
                style="width: 100px; margin-left: 16px;"
                @input="handleInputChange"
            />
        </a-form-model-item>
        <a-form-model-item label=" " :colon="false">
            <a-checkbox v-model="form.hourReportEnabled" @change="handleInputChange">小时数据上报</a-checkbox>
        </a-form-model-item>
        <a-form-model-item label=" " :colon="false">
            <a-checkbox v-model="form.dayReportEnabled" @change="handleInputChange">日数据上报</a-checkbox>
        </a-form-model-item>
    </a-form-model>
</template>

<script>
export default {
    name: 'ServerConfig',
    props: {
        value: {
            type: Object,
            required: true
        }
    },
    data() {
        return {
            form: this.initializeForm(this.value),
            isUpdating: false // 防止循环更新的标志
        }
    },
    watch: {
        value: {
            handler(newValue) {
                if (!this.isUpdating) {
                    this.form = this.initializeForm(newValue)
                }
            },
            immediate: false
        }
    },
    created() {
        // 创建防抖的更新函数
        this.debouncedEmit = this.debounce(this.emitChange, 300)
    },
    methods: {
        // 简单的防抖函数
        debounce(func, delay) {
            let timeoutId
            return function(...args) {
                clearTimeout(timeoutId)
                timeoutId = setTimeout(() => func.apply(this, args), delay)
            }
        },
        
        // 初始化表单数据
        initializeForm(value) {
            if (!value) return this.createDefaultForm()
            
            console.log('✅ [ServerConfig] 初始化表单数据:', value)
            return {
                enabled: value.enabled !== undefined ? value.enabled : false,
                ip: value.ip || '',
                port: value.port || '',
                mn: value.mn || '000000000000000000000000',
                pw: value.pw || '000000',
                protocolVersion: value.protocolVersion || '2017',
                heartbeatInterval: value.heartbeatInterval || '30',
                realtimeReportInterval: value.realtimeReportInterval || '30',
                timeout: value.timeout || '10',
                retryCount: value.retryCount || '3',
                minuteReportEnabled: value.minuteReportEnabled !== undefined ? value.minuteReportEnabled : true,
                minuteReportInterval: value.minuteReportInterval || '3',
                hourReportEnabled: value.hourReportEnabled !== undefined ? value.hourReportEnabled : true,
                dayReportEnabled: value.dayReportEnabled !== undefined ? value.dayReportEnabled : true
            }
        },
        
        // 创建默认表单
        createDefaultForm() {
            return {
                enabled: false,
                ip: '',
                port: '',
                mn: '000000000000000000000000',
                pw: '000000',
                protocolVersion: '2017',
                heartbeatInterval: '30',
                realtimeReportInterval: '30',
                timeout: '10',
                retryCount: '3',
                minuteReportEnabled: true,
                minuteReportInterval: '3',
                hourReportEnabled: true,
                dayReportEnabled: true
            }
        },
        
        // 处理输入变化
        handleInputChange() {
            this.debouncedEmit()
        },
        
        // 发送变化事件
        emitChange() {
            this.isUpdating = true
            this.$emit('input', { ...this.form })
            this.$nextTick(() => {
                this.isUpdating = false
            })
        }
    }
}
</script> 

<style scoped>
.ant-form-item {
    margin-bottom: 0;
}
</style> 